<template>
  <div class="record-selector">
    <div class="left">
      <switches
        class="switch-component" 
        :switches="switchName"
        :activeSwitchIndex="activeIndex"
        @click="updateIndex"
        >
      </switches>
      <dropdown-picker-phone @click="showLotteryPanel" v-show="showPicker">
        <template v-slot:title>
          {{selectedData}}
        </template>
        <template v-slot:icon>
          <div>
            <span class="icon">
              <i class="iconfont iconty_zhankai"></i>
            </span>
          </div>
        </template>
      </dropdown-picker-phone>
    </div>
    <div class="right">
    <time-picker @click="updateSelectedTime"></time-picker>
    </div>
  </div>
</template>

<script>
import Switches from '@/components/base/switches/switches'
import DropdownPickerPhone from '@/components/base/dropdown-picker/dropdown-picker-phone'
import TimePicker from '@/components/time-picker/time-picker'
export default {
  components: {
    Switches,
    DropdownPickerPhone,
    TimePicker
  },
  props: {
    selectedData: {
      type: String,
      default: ''
    },
    showPicker: {
      type: Boolean,
      default: true
    },
    switchName: {
      type: Array,
      default: function() {
        return [
          {name: ''},
          {name: ''}
        ]
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  
  data() {
    return {

    }
  },
  created() {
  },
  methods: {
    updateIndex(index) {
      this.$emit('update-index', index)
    },
    showLotteryPanel() {
      this.$emit('click')
    },
    handleTimePick() {
      this.$emit('show-picker')
    },
    updateSelectedTime(time) {
      this.$emit('update-time', time)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .record-selector 
    display flex
    align-items center
    height 40px 
    justify-content space-between
    background-color #fff
    position fixed
    top 48px 
    left 0 
    right 0
    z-index 101
    .left 
      display flex 
      align-items center 
      .switch-component 
        margin 0 10px
        height 30px 
        box-sizing border-box
      .switch-component >>> .switch-item 
        line-height 30px
        height 30px
    .right 
      width 40px 
      text-align center
      

</style>